<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul, ol, li {
      list-style: none;
    }

    .banner {
      width: 600px;
      height: 400px;
      border: 10px solid #333;
      margin: 30px auto;
      position: relative;
    }

    .banner > ul {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .banner > ul > li {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 100px;
      background-color: pink;
      opacity: 0;
      transition: opacity 1s;
    }

    .banner > ul > li.active {
      opacity: 1;
    }

    .banner > ol {
      height: 30px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      background-color: rgba(0, 0, 0, .4);
      border-radius: 15px;
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }

    .banner > ol > li {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
      margin: 0 6px;
    }

    .banner > ol > li.active {
      background-color: purple;
    }

    .banner > .leftRight {
      width: 100%;
      height: 40px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-between;
      user-select: none;
    }

    .banner > .leftRight > span {
      width: 20px;
      height: 100%;
      background-color: rgba(0, 0, 0, .4);
      color: #fff;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      user-select: none;
    }
  </style>
</head>
<body>
  <div class="banner" id="banner">
    <!-- 约定： ul 是内容 - box -->
    <ul class="imgBox">
      <li style="background-color: red;">1</li>
      <li style="background-color: orange;">2</li>
      <li style="background-color: green;">3</li>
      <li style="background-color: skyblue;">4</li>
      <li style="background-color: yellow;">5</li>
      <li style="background-color: blue;">6</li>
    </ul>

    <!-- 约定：ol 是 翻页 - point -->
    <ol class="pointBox">

    </ol>

    <!-- 约定 - class 名为 leftRight 是 左右 按钮 -->
    <div class="leftRight">
      <span class="left">&lt;</span>
      <span class="right">&gt;</span>
    </div>
  </div>
</body>
</html>
<script>
    // 编程思想：
      // 1） DRY原则
      // 2）单一职能原则 - 一个函数只干一件事情 - updateHtml 
          // 好处，让函数能 反复地复用
    
    const { log } = console;
    /* 轮播图的业务逻辑
      - autoPlay
        1）定时器自动轮播 - this.autoPlay
        2）鼠标滑入，停止轮播；鼠标滑出，继续轮播 - this.init_bindMouseEvent
    
      - 左右点击 btn
    
      - point 相关：
        1）动态创建 point DOM 元素 
        2) 点击 point 切换对应的 box
    */

    

    class Swiper{
        constructor(queryDom){
            this.container = typeof queryDom === 'string'
            ? document.querySelector(queryDom)
            : queryDom
            this.boxLi = this.container.querySelectorAll('ul > li')
            this.olLi = this.container.querySelector('ol')

            this.activeIndex = 0
            this.timeOut = null

            // log(this.boxLi)
            this.pointDom()

            // this,updateHtml()

            this.targetHtml()
            
            this.autoPlay()

            this.init_bindMouseEvent()

            this.bindLeftRight()

            this.init_bindClickForPoints()
        }
        //自动播放
        autoPlay(){
            this.timeOut = setInterval(() => {
                if(this.boxLi.length <= this.activeIndex){
                    this.activeIndex = 0
                }
                this.targetHtml()
                this.activeIndex++
            }, 1000);
        }
        //渲染 active
        updateHtml(target){
            target.forEach(li => {li.classList.remove('active')})
            target[this.activeIndex].classList.add('active')
            // const olLis = document.querySelectorAll('ol > li')
            // this.olLis.forEach(li => {li.classList.remove('active')})
            // this.olLis[this.activeIndex].classList.add('active')
        }
        targetHtml(){
            this.updateHtml(this.boxLi)

            const olLis = document.querySelectorAll('ol > li')

            this.updateHtml(olLis)
        }
        //鼠标划入停止,划出继续
        init_bindMouseEvent(){
            
            this.container.addEventListener('mouseenter',() => {
                clearTimeout(this.timeOut)
            })
            this.container.addEventListener('mouseleave',() => {
                this.autoPlay()
            })
        }
        //左右点击 切换
        bindLeftRight(){
            document.querySelector('.leftRight > .left').addEventListener('click',() => {
                this.activeIndex--
                if(this.activeIndex == -1){
                    this.activeIndex = this.boxLi.length - 1
                }
                this.targetHtml()
            })
            document.querySelector('.leftRight > .right').addEventListener('click',() => {
                this.activeIndex++
                if(this.activeIndex >= this.boxLi.length){
                    this.activeIndex = 0
                }
                this.targetHtml()
            })
        }
        //
        pointDom(){
            this.boxLi.forEach(e => {
                const domLi = document.createElement('li')
                this.olLi.appendChild(domLi)
            })
        }
        //点击⚪点切换
        init_bindClickForPoints(){
            const olLis = document.querySelectorAll('ol > li')
            olLis.forEach((li,item) => {
                li.addEventListener('click',() => {
                    this.activeIndex = item
                    this.targetHtml()
                })
            })
        }
    }

    const dom = document.querySelector('.banner')
    const o = new Swiper(dom)
    log(o)

</script>